Appearance
后端传递过来的图片是byte[]字节流格式,需要携带token才能获取到,像微信小程序的二维码、Activiti的图片流程图等数据都会用到,访问时设置responseType: "arraybuffer"
,再转换成base64格式直接显示。
javascript
view(id) {
var scene="xx"
this.$http({
url: this.$http.adornUrl('xxxx'),
method: 'post',
data: {
'scene': scene
},
responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
}).then(function (res) { // 将后台的图片二进制流传华为base64
return 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
}).then(data=>{
this.imageurl=data; // data即为图片地址
})
}
在封装的vue中使用如下:
javascript
export const exportPngApi = (definitionId) => {
return request({
url: `/api/admin/v1/process-definition/export/png/${definitionId}`,
responseType: "arraybuffer",
method: "GET"
})
}
const clickExportPng = async id => {
const res = await exportPngApi(id)
imgUrl.value = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
imgDialogVisible.value = true
}